<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-23 21:07:38
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 23:48:22
-->



<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ propsData.tableData.tableHeader }}</div>
                </div>
                <i class="iconfont icon-zhanghao"></i>
            </div>
        </template>
        <component :is="tableType" :tableData='data'>
        </component>
    </el-card>
</template>
  
  

<script setup lang="ts">
import { computed, ref } from "vue";
import BulletinVue from "./ui/Bulletin.vue";
import centerVue from "./ui/center.vue";
import followVue from "./ui/follow.vue";
import { deepCopy } from '@/utils/Tools/deepCopy';
interface BulletinData {
    id: number;
    noticedata: string;
    notice: string;
}

// 定义整个数据结构的类型
interface BulletinResponse {
    tableHeader: string;
    tableType: string;
    Data: BulletinData[];
}
interface IProps {
    tableData: BulletinResponse
}
const props = defineProps<IProps>()
const propsData = deepCopy(props)
const data = ref()
const tableType = computed(() => {
    switch (propsData.tableData.tableType) {
        case "BulletinVue":
            data.value = propsData.tableData.Data
            return BulletinVue;
        case "centerVue":
            data.value = propsData.tableData.Data
            return centerVue;
        case "followVue":
            data.value = propsData.tableData.Data
            return followVue;
    }
})
</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        width: 100%;
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;


            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }


}
</style>